<template>
  <gg-form-item :label="label" :must="must" :message="message" :messageDisplay="messageDisplay" :labelWidth="localLabelWidth" :layout="localLayout">
    <view class="gg-checkbox-tag">
      <checkbox-group @change="checkboxChange">
        <label class="gg-checkbox-tag-item gg-checkbox-tag-item-tag" v-for="item in items" :value="value" :key="item.value"
          :class="item.checked?'checkbox-checked':''">
          <view class="">
            <checkbox :value="item.value" :checked="item.checked" style="transform:scale(0.7)" />
          </view>
          <view>{{item.text}}</view>
        </label>
      </checkbox-group>

    </view>
  </gg-form-item>
</template>

<script>
import MixinsCheckbox from '../mixins/mixins-checkbox.js';
export default {
  mixins: [MixinsCheckbox],
  name: "GgCheckboxTag",
  inject: {

  },
  props: {
    //默认输入框内容
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    };
  },
  created: function () {
    this.localVal = this.value;
    if (this.maxNumber > 0) {
      this.message = '最多只能选择' + this.maxNumber + '个';
    }
    this.items = this.itemsSortOut();
  },
  methods: {
    itemsSortOut: function () {
      let original = [];
      if (this.dataUrl) {
        //网络请求

      } else {
        original = this.dataLists;
      }
      if (typeof original == 'string') {
        original = JSON.parse(original);
      }

      //整理数据
      let items = [];
      let dataValue = this.dataValue ? this.dataValue : 'value';
      let dataText = this.dataText ? this.dataText : 'text';
      let dataChecked = this.dataChecked ? this.dataChecked : 'checked';
      let i = 0;
      for (i in original) {
        let data = original[i];
        let checked = false;
        let text = data[dataText];
        let value = data[dataValue];
        if (typeof value == 'number') {
          value = value.toString()
        }
        if (data[dataChecked] == true) {
          checked = true
        }
        let localVal = this.localVal;
        let tempLocalVal = localVal.split(',');
        //写入已选选项
        for (const ii in localVal) {
          if (this.dataType == 'text') {
            if (tempLocalVal[ii] == text) {
              checked = true
            }
          } else {
            if (tempLocalVal[ii] == value) {
              checked = true
            }

          }
        }
        items.push({
          value: value,
          text: text,
          checked: checked
        })
      }
      return items;
    },
    checkboxChange: function (e) {
      var items = this.items,
        values = e.detail.value;
      for (var i = 0, lenI = items.length; i < lenI; ++i) {
        const item = items[i]
        if (values.includes(item.value)) {
          this.$set(item, 'checked', true);
        } else {
          this.$set(item, 'checked', false)
        }
      }
      let localVal = [];
      for (let i in items) {
        if (items[i].checked) {
          if (this.dataType == 'text') {
            localVal.push(items[i].text)
          } else {
            localVal.push(items[i].value)

          }
        }
      }
      if (this.maxNumber !== 0 && localVal.length > this.maxNumber) {
        this.messageDisplay = true;
      } else {
        this.messageDisplay = false;
      }
      this.localVal = localVal;
      this.$emit('input', localVal.join(","));
    }
  }
};
</script>

<style>
.gg-checkbox-tag {
  min-height: 25px;
}
.gg-checkbox-tag-item {
  margin: 5px 0;
  height: 25px;
  line-height: 25px;
  float: left;
  display: flex;
  margin-right: 10px;
}
.gg-checkbox-tag-item > view:first-child {
  display: none;
}
.gg-checkbox-tag-item-tag {
  border: solid 0.5px #f0f4f7;
  color: rgba(0, 0, 0, 0.4);
  padding: 0 10px;
  border-radius: 3px;
  background-color: #f0f4f7;
  font-size: 14px;
}
.gg-checkbox-tag-item-tag.checkbox-checked {
  color: #4292cc;
  border-color: #4292cc;
  background-color: #ddeffd;
}
</style>
